import React, { Component } from 'react'
import { Layout, Menu } from 'antd';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
// import SelectLang from '../SelectLang';
import Avatar from '../Avatar';
// import { autoFaceUrl, autoVideoUrl, jumpTo } from '@/utils/utils';
import BizIcon from '@/components/BizIcon'
import Link from 'umi/link';
import { withRouter } from 'react-router-dom';

import logo from '@/assets/logo.svg'
import styles from './index.less';

const appTitle = window.localStorage.getItem("appTitle")

const { Header } = Layout;

@connect(({ project: { appList } }) => ({
    appList,
}))
class GlobalHeader extends Component {
    componentDidMount() {
        // this.props.dispatch({
        //     type: 'project/fetchAppList'
        // });
    }
    render() {
        // let { appList } = this.props;
        // appList = appList.map((item, key) => {
        //     let url = item.url;
        //     if (item.appId == '2') {
        //         url = autoFaceUrl(url);
        //     }
        //     return {
        //         id: item.appId,
        //         title: item.name,
        //         url,
        //     }
        // })

        return (
            <Header className={`flex inline-item justify-content-between ${styles.header}`}>
                <div className="flex inline-item">
                    <div className={styles.logo}>
                        <img src={logo} alt='kd3000'></img>
                    </div>
                    <div className={styles.brandName}>
                        {appTitle || formatMessage({ id: 'app.title' })}
                    </div>
                </div>
                <div className="flex flex-item justify-content-between">
                    <Menu theme="dark"
                        className={styles.menu}
                        selectedKeys={[this.props.history.location.pathname]}
                        defaultSelectedKeys={['1']}
                        mode="horizontal"
                    >
                        {/* <Menu.Item key="/dashboard">
                            <Link to="/dashboard">
                                <BizIcon type="icon-keshihua" />
                                <span>{formatMessage({ id: 'menu.dashboard' })}</span>
                            </Link>
                        </Menu.Item> */}
                        <Menu.Item key="/">
                            <Link to="/">
                                <BizIcon type="icon-shipin" style={{ marginRight: '5px' }} />
                                <span>{formatMessage({ id: 'menu.video' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/location">
                            <Link to="/location">
                                <BizIcon type="icon-location-2" style={{ marginRight: '5px' }} />
                                <span>{formatMessage({ id: 'menu.location' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/trace">
                            <Link to="/trace">
                                <BizIcon type="icon-trace" style={{ marginRight: '5px' }} />
                                <span>{formatMessage({ id: 'menu.trace' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/playback">
                            <Link to="/playback">
                                <BizIcon type="icon-replay" style={{ marginRight: '5px' }} />
                                <span>{formatMessage({ id: 'menu.playback' })}</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="/configuration">
                            <Link to="/configuration">
                                <BizIcon type="icon-shezhi" style={{ marginRight: '5px' }} />
                                <span>{formatMessage({ id: 'menu.configuration' })}</span>
                            </Link>
                        </Menu.Item>
                    </Menu>

                    <div className="flex inline-item">
                        <Menu
                            theme="dark"
                            mode="horizontal"
                        >
                            {/* {
                                appList && appList.map((item, index) => {
                                    if (item.id !== '3') {
                                        return <Menu.Item key={index}>
                                            <a className="ant-dropdown-link" href="#" onClick={() => jumpTo(item.url)}>
                                                {item.title}
                                            </a>
                                        </Menu.Item>
                                    }
                                })
                            } */}
                        </Menu>
                        <Avatar />
                        {/* <SelectLang className={styles.action} /> */}
                    </div>
                </div>

            </Header>
        )
    }
}
// export default GlobalHeader;
export default withRouter(GlobalHeader)